<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <input
          class="search-input"
          placeholder="搜索"
          v-model="searchValue"
      />
    </view>

    <!-- 订单列表 -->
    <scroll-view scroll-y class="order-list">
      <view
          v-for="(order, index) in orders"
          :key="index"
          class="order-item"
      >

        <view class="info-row">
          <text class="label">下单用户：</text>
          <text class="value">{{ order.customerId }}</text>
        </view>

        <view class="info-row">
          <text class="label">实付金额：</text>
          <text class="value price">￥{{ order.totalAmount }}</text>
        </view>
        <view class="info-row">
          <text class="label">应付金额：</text>
          <text class="value price">￥{{ order.paidAmount }}</text>
        </view>

        <view class="info-row">
          <text class="label">核销时间：</text>
          <text class="value time">{{ order.orderTime }}</text>
        </view>
      </view>

    </scroll-view>
    <view>
      <text v-show="loading">加载中...</text>
      <text v-show="noMore">没有更多数据了</text>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import {getpage} from "@/api/mcslf/order"
const loading = ref(false)
const noMore = ref(false)
// 模拟订单数据
const orders = ref([
  {
    services: ['普通洗车', '机油', '工时'],
    customerId: '张三',
    paidAmount: '32.00',
    totalAmount: '32.00',
    orderTime: '2022-10-12T11:09:00'
  }
]);

const searchValue = ref('');
const pageparams = ref({
  "total": 0,
  "size": 5,
  "current": 0,
  "pages": 1
})
// 格式化时间显示
const loadMore = async () => {
  if (!noMore.value) {
    pageparams.value.current = pageparams.value.current + 1;
    let res = await getpage(pageparams.value);
    console.log(res.data.records);
    orders.value = [...orders.value,...res.data.records]
    pageparams.value.total = res.data.total;
    // loadData()
    if (orders.length >= 9) {
      noMore.value = true;
    }
  }
}
loadMore();



// 搜索过滤 增加窗口防抖

</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.search-bar {
  padding: 20rpx;
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 1;
}

.search-input {
  height: 70rpx;
  background-color: #f2f2f2;
  border-radius: 35rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
}

.order-list {
  padding: 20rpx;
  height: calc(100vh - 110rpx);
}

.order-item {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .service-type {
    font-size: 32rpx;
    font-weight: 500;
    display: block;
    margin-bottom: 20rpx;
  }

  .info-row {
    display: flex;
    align-items: center;
    margin-bottom: 12rpx;
    font-size: 28rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .label {
      color: #666;
      min-width: 140rpx;
    }

    .value {
      color: #333;

      &.price {
        color: #e93b3b;
        font-weight: 500;
      }

      &.time {
        color: #999;
      }
    }
  }
}
</style>